<!-- 图像数据 -->
<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<view class="body">
				<view class="weather-area">
					<navigator :url="'/package_common/search_tool/search_tool?dev_type=' + dev_type + '&typeid=' + select_dev.typeid" hover-class="none" class="change-btn">
						<view class="select-data f-s30">{{ select_dev.name }}</view>
						<view class="iconfont f-s20">&#xe623;</view>
					</navigator>
					<view class="data-wrap">
						<view class="item">
							<view class="device-id">
								<text>设备编号:</text>
								<text>{{ detail.getonelist.device_number||'--' }}</text>
							</view>
						</view>
						<view class="item">
							<view class="longitude">经度:{{ detail.getonelist.longitude || '--' }}</view>
							<view class="latitude">纬度:{{ detail.getonelist.latitude || '--' }}</view>
						</view>
						<view class="item">
							<view class="device-id">已培养时间(h):{{ detail.getonelist.cultime || '--' }}</view>
						</view>
					</view>
				</view>
				<view class="container">
					<view class="select-filter-bar">
						<view class="date-tab">
							<view :class="['item day', { active: params.time == 1 }]" @click="changeTime(1)">日</view>
							<view :class="['item date', { active: params.time == 2 }]" @click="changeTime(2)">周</view>
							<view :class="['item month', { active: params.time == 3 }]" @click="changeTime(3)">月</view>
						</view>
						<!-- <view class="date-bar">
							<view class="date start-date" @click="changeDate(1)">
								<input type="text" v-model="params_date.start_date" placeholder="选择开始时间" disabled="true"
									class="inp">
							</view>
							<view class="date end-date" @click="changeDate(2)">
								<input type="text" v-model="params_date.end_date" placeholder="选择结束时间" disabled="true"
									class="inp">
							</view>
							<view class="btn" @click="search">查询</view>
						</view> -->
					</view>

					<!-- 空气温湿度 -->
					<view class="data-area">
						<view class="page__title">
							<view class="title">空气温湿度</view>
							<!-- <view v-if="params.time==1" class="title">一日气温走势</view>
							<view v-if="params.time==2" class="title">一周气温走势</view>
							<view v-if="params.time==3" class="title">一月气温走势</view> -->
						</view>
						<view class="data-chart">
							<template v-if="dataTabUpdate.loading">
								<view class="loading-box"><loading :loadingState="dataTabUpdate"></loading></view>
							</template>
							<template v-else>
								<template v-if="detail.atlist.length && detail.ahlist.length">
									<uni-ec-canvas class="uni-ec-canvas" ref="air_temperature" canvas-id="air_temperature" :ec="ec" :force-use-old-canvas="true"></uni-ec-canvas>
								</template>
								<template v-else>
									<view class="check-tips"><text>暂无统计数据</text></view>
								</template>
							</template>
						</view>
					</view>
					<!-- 保温仓温度 -->
					<view class="data-area">
						<view class="page__title">
							<view class="title">保温仓温度</view>
							<!-- <view v-if="params.time==1" class="title">一日空气湿度走势</view>
							<view v-if="params.time==2" class="title">一周空气湿度走势</view>
							<view v-if="params.time==3" class="title">一月空气湿度走势</view> -->
						</view>
						<view class="data-chart">
							<template v-if="dataTabUpdate.loading">
								<view class="loading-box"><loading :loadingState="dataTabUpdate"></loading></view>
							</template>
							<template v-else>
								<template v-if="detail && detail.prelist">
									<uni-ec-canvas class="uni-ec-canvas" ref="bwc_temperature" canvas-id="bwc_temperature" :ec="ec" :force-use-old-canvas="true"></uni-ec-canvas>
								</template>
								<template v-else>
									<view class="check-tips"><text>暂无统计数据</text></view>
								</template>
							</template>
						</view>
					</view>
				</view>
				<!-- 弹窗 -->
				<view v-if="flag.isFullPage" class="full-fix-page a-fadein">
					<!-- 日期 -->
					<laydate v-if="flag.isSeleceDate" :type="date_type" @selectDate="selectDate" @closeDate="closeDate" @clearDate="clearDate"></laydate>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import loading from '@/components/loading-more.vue';
import laydate from '@/components/laydate.vue';
import empty from '@/components/empty.vue';
import uniEcCanvas from '@/components/uni-ec-canvas.vue';
import * as echarts from '@/common/echart/echarts.js';
let chart = null;
export default {
	name: 'name',
	data() {
		return {
			token: uni.getStorageSync('token'),
			appid: getApp().globalData.appid,
			isIphoneX: getApp().globalData.isIphoneX,
			isLogin: false,
			userInfo: uni.getStorageSync('userInfo'),
			loginStateUpdate: false,
			loadingState: {
				default: false,
				loading: false,
				completed: false
			},
			dataTabUpdate: {
				loading: true
			},
			dev_type: '',
			detail: {},
			params: {
				time: 1,
				start_date: '',
				over_date: ''
			},
			//图标参数对象  多个图标配置
			echart_option: {},
			select_dev: {
				name: '',
				id: '',
				typeid: '',
				update: false
			},
			ec: {
				lazyLoad: true
			},
			flag: {
				// 弹窗相关
				isFullPage: false,
				isSeleceDate: false
			},
			date_type: '',
			params_date: {
				start_date: '',
				end_date: ''
			},
			//表格数据
			table_detail: [],
			table_total: 0,
			page: 1
		};
	},
	async onLoad(params) {
		console.log(params);
		this.dev_type = params.dev_type;
		this.select_dev.id = params.dev_id;
		this.select_dev.name = params.dev_name;

		if (params.typeid) {
			this.select_dev.typeid = params.typeid;
		}

		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.dataTabUpdate.loading = true;
				this.detail = await this.getChartSpore();
				if (this.detail) {
					this.setChart();
				}
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},
	async onShow() {
		// 登录状态更新
		if (this.loginStateUpdate) {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
			this.dataTabUpdate.loading = true;
			this.detail = await this.getChartSpore();
			if (this.detail) {
				this.setChart();
			}
			this.loginStateUpdate = false;
		}

		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}

		// 设备切换
		if (this.select_dev.update) {
			this.dataInit();
			this.detail = await this.getChartSpore();
			if (this.detail) {
				this.setChart();
			}
			this.select_dev.update = false;
		}
	},

	methods: {
		dataInit: function() {
			this.page = 1;
			this.loadingState.loading = true;
			this.loadingState.completed = false;
			this.dataTabUpdate.loading = true;
		},

		// 初始化echart图表
		initChart: function(canvas, width, height, canvasDpr) {
			chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			});
			canvas.setChart(chart);
			chart.setOption(this.setEchartOption());
			return chart;
		},

		// 设置echart配置
		setEchartOption: function() {
			let interval = 0;
			if (xdata.length > 16) {
				interval = 1;
			}
			let option = {
				grid: {
					x: 40,
					y: 20,
					x2: 20,
					y2: 40
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line'
					}
				},
				xAxis: {
					type: 'category',
					data: [1, 2, 3, 4, 5, 6, 7], //this.pest_trend.date,
					axisLabel: {
						show: true,
						textStyle: {
							color: '#000'
						},
						interval: 1, //interval,
						rotate: 45 //倾斜度 -90 至 90 默认为0
					},
					axisLine: {
						lineStyle: {
							type: 'solid',
							color: '#000', //边线的颜色
							width: '1' //坐标线的宽度
						}
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						show: true,
						textStyle: {
							color: '#000'
						}
					},
					splitLine: {
						show: false
					},
					axisLine: {
						lineStyle: {
							type: 'solid',
							color: '#000', //边线的颜色
							width: '1' //坐标线的宽度
						}
					}
				},
				series: [
					{
						name: '',
						type: 'line',
						itemStyle: {
							normal: {
								lineStyle: {
									color: '#09f',
									width: 1
								}
							}
						},
						smooth: true,
						data: ydata //this.pest_trend.count
					}
				]
			};
			return option;
		},

		// 基本信息 曲线图
		getChartSpore: async function() {
			// console.log("请求曲线数据", {
			// 	appid: this.appid,
			// 	token: this.token,
			// 	user_id: this.userInfo.uid,
			// 	device_id: this.select_dev.id
			// })
			let res = await this.$api.tool_api.getChartSpore({
				appid: this.appid,
				token: this.token,
				user_id: this.userInfo.uid,
				device_id: this.select_dev.id,
				dtype: this.params.time
				// startTime:'2022-06-20',
				// endTime:'2022-06-27'
			});
			// console.log("曲线图数据", res)
			if (res.data.ret == 1000) {
				this.dataTabUpdate.loading = false;
				return res.data.data;
			} else {
				this.dataTabUpdate.loading = false;
				return false;
			}
		},

		// 切换时间
		changeTime: async function(type) {
			if (this.params.time == type) {
				return;
			} else {
				this.params.time = type;
				this.dataTabUpdate.loading = true;
				this.detail = await this.getChartSpore();
				if (this.detail) {
					this.setChart();
				}
			}
		},

		// 空气温度
		initAirTemperatureChart(canvas, width, height, canvasDpr) {
			chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			});
			canvas.setChart(chart);
			chart.setOption(this.echart_option.air_temperature);
			return chart;
		},

		// 保温仓
		initBwcTemperatureChart(canvas, width, height, canvasDpr) {
			chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			});
			canvas.setChart(chart);
			chart.setOption(this.echart_option.bwc_temperature);
			return chart;
		},

		// 设置图表
		setChart: function() {
			// 空气温湿度echart配置
			if (this.detail && this.detail.ahlist && this.detail.atlist) {
				this.echart_option.air_temperature = this.setEchartOption(this.detail.datelist, [this.detail.ahlist, this.detail.atlist], 2);
			}

			// 保温仓湿度echart配置
			if (this.detail && this.detail.prelist) {
				this.echart_option.bwc_temperature = this.setEchartOption(this.detail.datelist, this.detail.prelist);
			}

			setTimeout(() => {
				if (this.detail.atlist && this.detail.ahlist) {
					this.$refs.air_temperature.init(this.initAirTemperatureChart);
				}

				if (this.detail && this.detail.prelist) {
					this.$refs.bwc_temperature.init(this.initBwcTemperatureChart);
				}
			}, 300);
		},

		// 设置图表配置
		setEchartOption: function(xdata, ydata, lineNum) {
			let interval = 0;
			if (xdata.length > 16) {
				interval = 1;
			}
			let series = null;
			if (lineNum == 2) {
				series = [
					{
						name: '空气湿度(%)',
						type: 'line',
						itemStyle: {
							normal: {
								lineStyle: {
									// color: '#09f',
									width: 1
								}
							}
						},
						smooth: true,
						data: lineNum == 2 ? ydata[0] : ydata //ydata
					},
					{
						name: '空气温度(℃)',
						type: 'line',
						itemStyle: {
							normal: {
								lineStyle: {
									// color: '#FE8C0E',
									width: 1
								}
							}
						},
						smooth: true,
						data: ydata[1] //ydata
					}
				];
			} else {
				series = {
					name: '保温仓温度(℃)',
					type: 'line',
					itemStyle: {
						normal: {
							lineStyle: {
								// color: '#2EC7C9',
								width: 1
							}
						}
					},
					smooth: true,
					data: ydata //ydata
				};
			}

			let option = {
				// color: lineNum == 2 ? ['#09f', '#FE8C0E'] : ['#2EC7C9'],
				grid: {
					x: 40,
					y: 20,
					x2: 20,
					y2: 40
				},
				legend: {
					data: lineNum == 2 ? ['空气湿度(%)', '空气温度(℃)'] : ['保温仓温度(℃)']
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line'
					}
				},
				xAxis: {
					type: 'category',
					data: xdata,
					axisLabel: {
						show: true,
						textStyle: {
							color: '#000'
						},
						interval: interval,
						rotate: 45 //倾斜度 -90 至 90 默认为0
					},
					axisLine: {
						lineStyle: {
							type: 'solid',
							color: '#000', //边线的颜色
							width: '1' //坐标线的宽度
						}
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						show: true,
						textStyle: {
							color: '#000'
						}
					},
					splitLine: {
						show: false
					},
					axisLine: {
						lineStyle: {
							type: 'solid',
							color: '#000', //边线的颜色
							width: '1' //坐标线的宽度
						}
					}
				},
				series: series
			};

			return option;
		},

		// 查询开始结束日期数据
		changeDate: function(type) {
			// console.log(e, weath, type);
			//type ==1 开始日期 2 终止日期
			this.date_type = type;
			this.showPopup('show', 'isSeleceDate');
		},

		// 弹窗
		showPopup: function(type, name) {
			if (type == 'show') {
				this.flag.isFullPage = true;
				this.flag[name] = true;
			} else if (type == 'hide') {
				for (let i in this.flag) {
					this.flag[i] = false;
				}
			}
		},

		// 选择日期
		selectDate: function(data) {
			this.flag.isFullPage = false;
			this.flag.isSeleceDate = false;
			// console.log(data, this.date_ele)

			if (data.type == 1) {
				this.params_date.start_date = data.date;
			} else {
				this.params_date.end_date = data.date;
			}
		},

		// 关闭日期控件
		closeDate: function() {
			this.showPopup('hide');
		},

		// 清空日期
		clearDate: function(data) {
			this.flag.isFullPage = false;
			this.flag.isSeleceDate = false;
			this.params_date.start_date = '';
			this.params_date.end_date = '';
		},

		search: function() {
			this.dataInit();
			this.getPestDataList();
		}
	},
	components: {
		loading,
		laydate,
		empty,
		uniEcCanvas
	},
	computed: {},
	watch: {}
};
</script>

<style lang="less">
page {
	// background: #f5f5f5;
	background-color: #fff;
}

.page__title {
	.title {
		font-size: 32rpx;
		font-weight: bold;
	}
}

.data-area {
	padding: 0 20rpx;
	margin-bottom: 20rpx;
	background: #fff;
	// height: 450rpx;

	.title {
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.data-chart {
		height: 450rpx;

		.loading-box {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.check-tips {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28rpx;
			color: #666;
		}
	}
}

.weather-area {
	// min-height: 780rpx;
	// background: url(../../static/images/weather_bg.png) no-repeat;
	// background-size: cover;
	background-color: #fff;

	.loading-box {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.change-btn {
	// color: #fff;

	.iconfont {
		// color: #fff
	}
}

.area {
	display: flex;
	justify-content: center;
	padding: 30rpx 0 10rpx;
	font-size: 30rpx;
	color: #fff;

	.icon {
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
		margin-right: 20rpx;

		image {
			width: 100%;
		}
	}

	.address {
		max-width: 80%;
	}
}

.position-code {
	margin-bottom: 40rpx;
	text-align: center;
	color: #fff;
	font-size: 24rpx;
}

.temperature-data {
	margin-bottom: 50rpx;
	text-align: center;
	font-size: 46rpx;
	font-weight: bold;
	color: #fff;
}

.data-wrap {
	margin: 0 10rpx;
	padding: 0 !important;

	.item {
		// display: flex;
		// justify-content: center;
		padding-left: 3%;
		margin-bottom: 0;
		font-size: 28rpx !important;
		height: 55rpx;
		display: flex;
		align-items: center;
		// border-bottom: 1px solid #d1d1d1;
		& > view {
			margin: 0 10rpx;
			display: flex;
			flex-wrap: wrap;
		}
	}
}

.select-filter-bar {
	display: flex;
	// justify-content: center;
	margin: 40rpx 10rpx 20rpx 20rpx;
	// background-color: #fff;
}

.date-tab {
	display: flex;
	flex-shrink: 0;
	margin: 0 20rpx 20rpx 0;
	width: 250rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 15rpx;
	border: 1rpx solid #1199fe;
	// background: #fff;
}

.date-tab .item {
	flex-grow: 1;
	// width: 1%;
	flex-shrink: 0;
	// line-height: 50rpx;
	text-align: center;
	font-size: 28rpx;
}

.date-tab .month.active {
	background: #1199fe;
	border-top-right-radius: 13rpx;
	border-bottom-right-radius: 13rpx;
	color: #fff;
}

.date-tab .date.active {
	background: #1199fe;
	color: #fff;
}

.date-tab .day.active {
	background: #1199fe;
	border-top-left-radius: 13rpx;
	border-bottom-left-radius: 13rpx;
	color: #fff;
}

.select-date-area {
	display: flex;
	justify-content: space-between;
	height: 60rpx;
	line-height: 60rpx;
	// margin-top: 30rpx;

	.item {
		&:nth-of-type(1) {
			flex: 2;
		}

		&:nth-of-type(2) {
			flex: 2;
		}

		&:nth-of-type(3) {
			flex: 1;
		}

		font-size: 30rpx !important;

		picker {
			width: 80%;
			// line-height: 50rpx;
			color: #999999;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
		}

		.sure-btn {
			background-color: #1199fe;
			color: #fff;
			height: 100%;
			border-radius: 15rpx;
			line-height: 60rpx;
			width: 120rpx;
		}
	}
}
</style>
